<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
    <link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.js"></script>
    <!--3.验证规则样式-->
    <link href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">
    <!--4.核心验证文件-->
    <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
    <!--5.中文校验-->
    <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/language/zh_CN.js"></script>

    <script>
        $(function () {
            //数据的获取

            //数据的展示
            for(let i=0;i<10;i++){
                //表格添加行
                var $tr = $("<tr>")
                    //行添加10列
                    //编号
                    .append($("<td>")
                                   .addClass("text-center")
                                   .text(i))
                    //分类名称
                    .append($("<td>")
                                   .addClass("text-center")
                                   .text("分类"+i))
                    //级别
                    .append($("<td>")
                                   .addClass("text-center")
                                   .text("级别"+i))
                    //商品数量
                    .append($("<td>")
                                   .addClass("text-center")
                                   .text(i))
                    //数量单位
                    .append($("<td>")
                                   .addClass("text-center")
                                   .text("件"))
                    //导航栏
                    .append($("<td>")
                                   .addClass("text-center")
                                   .text("开"))
                    //是否显示
                    .append($("<td>")
                                   .addClass("text-center")
                                   .text("是"))
                    //排序
                    .append($("<td>")
                                   .addClass("text-center")
                                   .text(i))
                    //设置
                    .append($("<td>")
                                   .addClass("text-center")
                                   .append($("<input type='button' class='btn btn-default center-block' value='编辑'>")))
                    //操作
                    .append($("<td>")
                                   .addClass("text-center")
                                   .append($("<input type='button' class='btn btn-default  alert-danger center-block' value='删除'>")))
                $("#table").append($tr)
            }
        })
    </script>
    <style>
        #add{
            padding-right: 50px;
            padding-top: 0.5%;
        }
        .top10{
            padding-top: 10%;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container-fluid col-lg-10">
        <!--表头-->
        <div>
            <nav class="navbar navbar-default">
                    <div class="navbar-header">
                        <span class="top10 glyphicon glyphicon-indent-left col-sm-12 " href="#">
                            数据列表
                        </span>
                    </div>
                    <div class="navbar-header navbar-right" id="add">
                        <input type="button" class="btn btn-default " value="添加">
                    </div>

            </nav>
        </div>
        <!--数据表-->
        <table id="table" class="table table-bordered table-condensed table-hover">
        <tr >
            <th class="text-center">编号</th>
            <th class="text-center">分类名称</th>
            <th class="text-center">级别</th>
            <th class="text-center">商品数量</th>
            <th class="text-center">数量单位</th>
            <th class="text-center">导航栏</th>
            <th class="text-center">是否显示</th>
            <th class="text-center">排序</th>
            <th class="text-center">设置</th>
            <th class="text-center">操作</th>
        </tr>
        </table>
        <!--表尾-->
        <div>
            <nav aria-label="Page navigation" >
                <ul class="pagination pull-right">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
</body>
</html>